<template>
	<div>
		<div class="actor_bar">
			<span class="actor_text">演职人员</span>
		</div>
		<div class="actor_list">
			<ul>
				<li v-for="item in actors">
					<div class="actor_item">
						<div><img :src="item.avatarAddress" alt="" /></div>
						<span class="span1">{{ item.name }}</span>
						<span class="span2">{{ item.role }}</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	props: ['actors'],
	data() {
		return {}
	},
}
</script>

<style lang="less" scoped>
.actor_bar {
	width: 100%;
	padding: 15px;
	.actor_text {
		font-size: 16px;
		text-align: left;
		color: #191a1b;
		display: inline-block;
		height: 22.5px;
		line-height: 22px;
	}
}

.actor_list {
	height: 140px;
	background: rgb(255, 255, 255);
	ul {
		display: flex;
		justify-content: flex-start;
		position: relative;
		width: 100%;
		padding-left: 15px;
    overflow: hidden;
		li {
			position: relative;
			margin-right: 10px;
			.actor_item {
				text-align: center;
				box-sizing: border-box;
				img {
					width: 85px;
					height: 85px;
					background: rgb(249, 249, 249);
				}
				.span1 {
					padding-top: 10px;
					font-size: 12px;
					color: #191a1b;
					width: 85px;
					height: 18px;
					line-height: 0px;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					display: block;
					text-align: center;
				}
				.span2 {
					font-size: 10px;
					color: #797d82;
					display: block;
					text-align: center;
				}
			}
		}
	}
}
</style>
